<template>
	<view class="index">
		<view>
			<geek-header placeholder bgColor="#FF4907">
				<template #center>
					<view style="margin-bottom: 2rpx;">
						<image mode="heightFix" style="height: 34rpx;" src="@/static/index/xpx_2.png"></image>
					</view>
				</template>
			</geek-header>
		</view>

		<xpx-loading :show="Loading"></xpx-loading>

		<!-- 头部背景 -->
		<view class="header">
			<view class="header-warp">
				<u-swiper :borderRadius="24" :height="240" @click="handleClick" :list="state.banner"></u-swiper>
			</view>
		</view>
		
		<!-- 导航 2025/9/11 -->
		<view class="mt-[32rpx] df jcsb pl30 pr30">
			<view class="" @click="toPath('/pages/order/order')">
				<image src="../../static/index/nav2@2x.png" class="vt" style="width: 294rpx; height: 344rpx;"></image>
			</view>
			<view class="df fldc jcsb">
				<view class="" @click="toPath('/pages/index/share')">
					<image src="../../static/index/nav5@2x.png" class="vt" style="width: 374rpx; height: 160rpx;"></image>
				</view>
				<view class="" @click="toPath('/pages/idsearch/idsearch')">
					<image src="../../static/index/nav4@2x.png" class="vt" style="width: 374rpx; height: 160rpx;"></image>
				</view>
			</view>
		</view>
		
		<!-- 导航 -->
		<!-- <view class="nav">
			<view class="nav-top">
				<view @click="toPath('/pages/qiugou/index')">
					<image src="../../static/index/nav1@2x.png"></image>
				</view>
				<view @click="toPath('/pages/order/order')">
					<image src="../../static/index/nav2@2x.png"></image>
				</view>
			</view>
			<view class="nav-bottom">
				<view @click="toPath('/pages/image_search/image_search')">
					<image src="../../static/index/nav3@2x.png"></image>
				</view>
				<view @click="toPath('/pages/idsearch/idsearch')">
					<image src="../../static/index/nav4@2x.png"></image>
				</view>
				<view @click="toPath('/pages/index/share')">
					<image src="../../static/index/nav5@2x.png"></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="ad-box">
			<view class="ad-img" @click="showImage(state.mt)">
				<image mode="widthFix" src="../../static/index/ad1.png"></image>
			</view>
			<view class="ad-img" @click="showImage(state.jrvip)">
				<image mode="widthFix"  src="../../static/index/ad2.png"></image>
			</view>
		</view> -->
		<!-- 滚动新闻 -->
		<view class="mt20 lexun_box">
			<view class="flex_box aic hp100">
				<view class="mr25 tags_1">
					<image style="width: 40rpx;height: 40rpx" src="../../static/index/icon_notice@2x.png"></image>
					<image style="width: 54rpx;height: 27rpx;margin-left: 12rpx;margin-right: 16rpx;"
						src="../../static/index/gg.png"></image>
				</view>
				<view class="item hp100 ov">
					<swiper class="swiper_2" :autoplay="true" :interval="3000" :circular="true" :vertical="true">
						<swiper-item v-for="(item,index) in state.notice" :key="index">
							<view class="flex_box aic hp100">
								<view v-if="item.text1" style="flex: 1;" class=" mr20 ell fs24 cor_333">{{item.text1}}
								</view>
								<view v-if="item.text2" class="item fs24 cor_548">{{item.text2}}</view>
								<view v-if="item.text3" class="fs24 cor_bbb">{{item.text3}}</view>
							</view>
						</swiper-item>
					</swiper>

				</view>
				<view class="df aic hp100">
					<text class="text-[24rpx] text-[#FF4907]">收益28.29</text>
					<text class="ml-[24rpx] text-[24rpx] text-[#666]">12:24</text>
				</view>
			</view>
		</view>
		<!-- 门店 -->
		<view class="store_warp" v-if="state.store.store_id > 0">
			<view class="store_info">
				<view class="store_reght">
					<image class="vt" style="width: 200rpx;height: 120rpx; border-radius: 12rpx;" :src="state.store.logo"></image>
				</view>
				<view class="store_left">
					<view class="store_i_1 flex items-center">
						<image class="store_icon mr-[12rpx]" src="../../static/index/icon_shop@2x.png"></image>
						<view class="store_t">{{state.store.store_title}}</view>
						<view class="store_jl">{{state.store.m}}</view>
					</view>
					<view class="store_i_2 mt-[26rpx] flex w-[100%]" >
						<image mode="aspectFit" class="icon-wz mr-[12rpx]" src="../../static/index/icon_location@2x.png"></image>
						<view class="flex-1 overflow-hidden">
							<view class="cor_666 wz-zi">{{state.store.address}} </view>
						</view>
						<view class="flex items-end">
							<image mode="aspectFit" class="icon-fz" @click="copy(
							   							`负责人：${state.store.person} TEL:${state.store.mobile}
							   ${state.store.address}`)" style="width: 40rpx;height: 40rpx;object-fit: contain;"
								src="../../static/index/copy@2x.png"></image>
						</view>
						
					</view>
				</view>

			</view>
			<view class="store_btn">
				<view class="store_btn_item" @click="showImage(state.store.weixin_image)">
					<image src="@/static/index/wx.png"></image>
				</view>
				<view class="store_btn_item" @click="call(state.store.mobile)">
					<image src="@/static/index/call@2x.png"></image>
				</view>
				<view class="store_btn_item" @click="lookMap(state.store.lat - 0,
								state.store.lng - 0,
								state.store.store_title,
								state.store.address
							)">
					<image src="@/static/index/location@2x.png"></image>
				</view>
			</view>
		</view>

		<!-- F4F6F8 -->
		<u-sticky bgColor="#F4F6F8" :offsetTop="0">
			<!-- width: 100vw;margin-left: -30rpx -->
			<view id="tab_max_box_id" :class="{'tab_max_box_id':isXd}" :style="`padding-top: ${isXd ? getStatusBarHeight() : 10}px`">
				<view @click="toPath('/pages/product/search')">
					<view class="re df search_box_sty_warp">
						<view class="search_box_sty">
							<image class="icon_serach_size vt" src="../../static/index/search@2x.png"></image>
							<view class="ml20 fs28 cor_999">搜索</view>
						</view>
					</view>
				</view>
				<view class="tab_max_box flex_box ">
					<view @click="aaa('view_0')" :class="{active:act == 0}" class="item  item_max">环保手机报价</view>
					<view @click="aaa('view_1')" :class="{active:act == 1}" class="item item_max">数码相机报价</view>
					<view @click="aaa('view_2')" :class="{active:act == 2}" class="item item_max">靓机报价</view>
				</view>
			</view>

		</u-sticky>


		<view class="mt-[30rpx]">


			<view class="offer_warp " style="position: relative;" v-for="(item,index) in state.caList" :key="index">
				<view class="ycc" :id="`view_${index}`"></view>
				<view :key="cat_index" v-for="(cat,cat_index) in item.children" class="offer_item">
					<view>
						<image mode="widthFix" style="width: 100%;" :src="cat.image"></image>
					</view>
					<view class="pt15">
						<view class="brand_list df fw">
							<block v-for="(item,item_index) in cat.children" :key="item_index">
								<view v-if="item.offer_category_id == 3" class="brand_item"
									@click="handleOffer(item.offer_category_id)">
									<view class="re">
										<image style="width: 125rpx;height: 125rpx;margin-top: -10rpx;"
											:src="item.image" class="brand_logo vt"></image>
									</view>
									<view class="lh45">{{item.category_name}}</view>
								</view>
								<view v-else class="brand_item" @click="handleOffer(item.offer_category_id)">
									<view class="re">
										<image :src="item.image" class="brand_logo vt"></image>
									</view>
									<view class="mt20 lh45">{{item.category_name}}</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>



		</view>



		<view class="mt20 bgf new_warp">
			<view class="title_box flex_box aic  re">
				<image class="h_hb" src="../../static/my/h_bg09@2x.png"></image>
				<view class="item title-zi2">
					<view >回收简报 </view>
				</view>
				<view class="flex title-zi" @click="toPath('/pages/news/news')">
					<view >
						全部
					</view>
					<image src="../../static/my/arrow_r@2x.png"></image>
				</view>
			</view>
			<view class="" style="padding-bottom: 0;">
				<view class="card_list ">
					<block v-for="(newsItem, newsIndex) in state.article" :key="newsIndex">
					    <news-card :item="newsItem" :newsId="newsItem.id"></news-card>
					</block>
				</view>
			</view>
		</view>

		<view style="height: 100rpx;"></view>
		
		<tabbar />
	</view>
</template>


<script setup lang="ts">
	import NewsList from '../news/component/news-list.vue'
	import ljPointout from '@/components/lj-pointout/lj-pointout.vue'
	// import geekHeader from '@/uni_modules/geek-header/components/geek-header/geek-header.vue'
	import { getIndex, offerDetail } from '@/api/shop'
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick, getCurrentInstance } from 'vue'
	import { navigateTo } from '@/utils/util'
	import { showImage, call, copy, lookMap } from "@/utils/tools.ts"

	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)

	const isXd = ref(0);
	const Loading = ref(true);

	const state = reactive<{
		pages : any[]
		article : any[],
		store : {},
		notice : any[],
		banner : any[],
		mt : string,
		jrvip : string,
		caList : any[]
	}>({
		pages: [],
		article: [],
		banner: [],
		notice: [],
		store: { store_id: 0 },
		mt : '',
		jrvip : '',
		caList: []
	})

	const menuLeftFlag = ref(true);

	const act = ref(0);

	const gh = reactive({
		view_0: 0,
		view_1: 0,
		view_2: 0,
	})


	const funcNo = () => {
		uni.showToast({
			title: "即将上线",
			icon: 'none'
		})
	};








	const lookMore = () => {
		menuLeftFlag.value = false
	}

	const handleClick = (index : any) => {
		navigateTo(state.banner[index].link);
	}

	const toPath = (link : any, login = true) => {
		// console.log(login,isLogin.value == false)
		if (isLogin.value == false && login) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		uni.navigateTo({
			url: link
		})
	}

	const handleOffer = (id : Number) => {
		if (isLogin.value == false) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		uni.showLoading({
			title: '加载中'
		})
		offerDetail({ id: id }).then(res => {
			uni.hideLoading();
			if (res.offer_type == 1) {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + res.url,
				})
			}
			if (res.offer_type == 3) {
				uni.navigateTo({
					url: '/pages/product/list?id=' + res.cat_id,
				})
			}
			if (res.offer_type == 2) {
				uni.previewImage({
					urls: [res.offer_image],
				})
			}
		})
	}



	const instance = getCurrentInstance();
	onPageScroll((e : any) => {

		let t = e.scrollTop * 1.4;
		console.log(gh.view_0, gh.view_1, gh.view_2, t);
		if (t >= gh.view_0 && t < gh.view_1) {
			act.value = 0;
		}
		if (t >= gh.view_0 && t > gh.view_1 && t < gh.view_2) {
			act.value = 1;
		}

		if (t >= gh.view_0 && t > gh.view_1 && t > gh.view_2) {
			act.value = 2;
		}
		// console.log(act.value);	
		let query = uni.createSelectorQuery().in(instance);
		query.select('#tab_max_box_id').fields({ dataset: true, rect: true, id: true });
		query.exec(eles => {
			if (eles[0].top <= 5) {
				isXd.value = 1
			} else {
				isXd.value = 0
			}
		})
	});

	const aaa = (id : any) => {
		uni.pageScrollTo({
			selector: `#${id}`,
			duration: 0
		})
	}
	onShareAppMessage(() => {
		return {
			title: "闲置手机卖高价，就找闲品侠",
			path: '/pages/index/index?agentId=' + userInfo?._object?.userInfo?.id || 0,
		}
	})
	onLoad(() => {
		getData();
		getStatusBarHeight();
	});



	const getData = async () => {
		const data = await getIndex()
		state.article = data.article;
		state.caList = data.cat_list
		state.banner = data.banner;
		state.notice = data.notice;
		state.store = data.store;
		state.mt = data.mt;
		state.jrvip = data.jrvip;
		Loading.value = false;
		
		nextTick(() => {
			uni.createSelectorQuery().select("#view_0")
				.boundingClientRect((res) => {
					console.log(res);
					gh.view_0 = res?.top;
				}).exec();

			uni.createSelectorQuery().select("#view_1")
				.boundingClientRect((res) => {
					console.log("view2", res);
					gh.view_1 = res?.top;
				}).exec();

			uni.createSelectorQuery().select("#view_2")
				.boundingClientRect((res) => {
					console.log("view3", res);
					gh.view_2 = res?.top;
				}).exec();

		});

	};
	
	const getStatusBarHeight = () => {
		const info = wx.getSystemInfoSync();
		console.log('当前顶部刘海的高度===========>', info.statusBarHeight);
		return info.statusBarHeight || 10;
	};
</script>

<style lang="scss">
	
	.u-indicator-item-round {
	  width: 16rpx !important;
	  height: 16rpx !important;
	  margin: 0 12rpx !important;
	  border-radius: 50% !important;
	  transition: all 0.5s;
	  background-color: rgba(0, 0, 0, 0.2) !important;
	}
	.u-indicator-item-round-active {
	  background-color: rgba(255, 255, 255, 1) !important;
	}
	
	.ad-box{
		display: flex;
		padding: 0 30rpx ;
		margin-top: 20rpx;
		gap:30rpx;
		.ad-img{
		
			image{
				width: calc(50vw - 45rpx);
			}
		}
	}
	.card_list{
		.card_item{
			display: flex;
			margin-bottom: 30rpx;
			.news-title{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
			
			.news-cove{
				width: 220rpx;
				height: 150rpx;
				border-radius: 8rpx;
			}
			.tags_vip_pos{
				// width: 20rpx;
				height: 20rpx;
				position: absolute;
				left: 0;
			}
		}
	}
	
	.new_warp {
		margin: 0 30rpx;
		border-radius: 16rpx;

		.title-zi2 {
			position: relative;
			z-index: 2;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			margin-left: 30rpx;
		}

		.title-zi {
			position: relative;
			z-index: 2;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 30rpx;
				margin-left: 20rpx;
			}
		}

		.title_box {
			height: 96rpx;

			.h_hb {
				position: absolute;
				height: 96rpx;
				width: 100%;
				z-index: 1;
			}
		}

	}


	.offer_warp {
		margin: 0 30rpx;

		// padding: 0 30rpx;
		// width: calc(100vw - 15rpx);
		.offer_item {
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
		}

		// margin-top: 30rpx;
	}

	.ycc {
		height: 160rpx;
		width: 100%;
		position: absolute;
		top: -160rpx;
		z-index: -1;
	}


	.brand_list {
		position: relative;
	}

	.brand_list .brand_item {
		position: relative;
		padding: 20rpx 0;
		width: calc(25% - 20rpx);
		margin: 0 10rpx;
		/* height: 160rpx; */
		text-align: center;
		font-size: 26rpx;
		color: #333;
		/* background: #F9FCFB; */
		border-radius: 10rpx;
		margin-top: 20rpx;
		/* margin-left: 17rpx; */
		font-weight: bold;
	}

	.brand_list .brand_item .brand_logo {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
	}




	.tab_max_box {
		position: relative;
		// background: #fff;
		margin: 0 15rpx;
		width: calc(100vw - 30rpx);

		.item_max {
			position: relative;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			margin: 0 15rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
	}



	.tab_max_box .item_max.active {
		color: #fff;
		font-weight: 500;
		background: #FF4907;
	}

	.tab_area_list {
		white-space: nowrap;
	}

	.tab_area_list .item_tab {
		position: relative;
		display: inline-block;
		padding: 0 25rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tab_area_list .item_tab .fz_sty_re {
		position: relative;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		z-index: 2;
	}

	/* .tab_area_list .item_tab.active .fz_sty_re { font-weight: bold;font-size: 32rpx; } */

	.tab_area_list .item_tab::after {
		display: none;
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 60rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #0EE6A1 0%, #98E912 100%);
		border-radius: 3rpx;
		transform: translateX(-50%);
		z-index: 2;
	}

	.tab_area_list .active.item_tab::after {
		display: block;
	}

	.tab_area_list .active.item_tab {
		background: #fff;
	}

	.brand_list {
		position: relative;
	}



	.tab_max_box_id {
		width: 100vw;
		padding-top: var(--status-bar-height)px;
		padding-bottom: 12rpx;
		background-color: #fff;

		.search_box_sty_warp {}

	}

	.search_box_sty {
		position: relative;
		display: flex;
		align-items: center;
		text-align: left;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 16rpx;
		border: 2rpx solid #FF4907;
		margin: 0 30rpx 32rpx;
	}

	.icon_serach_size {
		position: relative;
		width: 32rpx;
		height: 33rpx;
	}


	.store_warp {
		border-radius: 16rpx;
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;

		.store_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.store_btn_item {
				// width: 190px;
				height: 56rpx;
				padding: 12rpx 80rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 2rpx solid #eee;
				text-align: center;
				// line-height: 56rpx;
			}

			image {
				width: 33rpx;
				height: 33rpx;
				// margin-top: 11rpx;
			}
		}

		.store_info {
			display: flex;

			.store_reght {
				margin-right: 20rpx;
			}

			.store_i_2 {
				position: relative;

				.icon-wz {
					// position: absolute;
					// top: 0;
					// left: 0;
					width: 26rpx;
					height: 26rpx;
				}

				.wz-zi {
					line-height: 32rpx;
					font-size: 24rpx;
					color: #666;
					// padding: 0  12rpx;
				}

				.icon-fz {
					position: relative;
					// bottom: 0;
					// margin-left: 12rpx;
				}

			}

			.store_left {
				flex: 1;

				.store_t {
					font-weight: bold;
					font-size: 28rpx;
					color: #000;
					line-height: 36rpx;
					flex: 1;
				}

				.store_jl {
					color: #999999;
					font-size: 24rpx;
				}

			}

			.store_icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.lexun_box {
		position: relative;
		padding: 24rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 32rpx 30rpx;

		.swiper_2 {
			position: relative;
			height: 100%;
		}

		.tags_1 {
			display: flex;
			height: 100%;
			align-items: center;
			border-right: 2rpx solid #CCCCCC;
			// margin-right: 16rpx;
		}
	}


	.nav {
		padding: 0 30rpx;

		.nav-top {
			display: flex;
			width: 100%;

			view {
				width: calc(50% - 15rpx);

				image {
					width: 100%;
					height: 160rpx;
				}

				&:first-child {
					margin-right: 30rpx;
				}
			}

		}

		.nav-bottom {
			display: flex;
			width: 100%;
			margin-top: 30rpx;

			view {
				width: calc(33% - 15rpx);

				image {
					width: 100%;
					height: 160rpx;
				}

				&:nth-child(2) {
					margin: 0 30rpx;
				}
			}
		}
	}

	.header {
		background: #FF4907;

		.header-warp {
			background: linear-gradient(0, #F4F6F8 0%, #FFFFFF 100%);
			border-radius: 50rpx 50rpx 0 0;
			// height: 240rpx;
			padding: 32rpx 30rpx 0 30rpx;
		}
	}

	page {
		background: #F4F6F8;
	}
</style>